<template>
	<view class="container">
		<view class="listText" @click="listText">
			<text>{{app.language.listText3}}</text>
		</view>
		<view class="currentBox">
			<!-- 是否匿名 -->
			<view class="formItem1">
				<text><text class="bt">*</text>{{ app.language.jd_anonymous }}:</text>
				<view class="formB">
					<radio-group @change="handleChange" class="radioGroup">
						<radio value="1" checked color="#2f8ef9" />
						<text class="radioYes">{{ app.language.no }}</text>
						<radio value="0" color="#2f8ef9" />
						<text>{{ app.language.yes }}</text>
					</radio-group>
				</view>
			</view>
			<!-- 不匿名举报 -->
			<!-- 姓名 -->
			<view class="formItem1" v-if="isLeaseShow">
				<text>{{ app.language.jd_anonymousName }}:</text>
				<view class="formB">
					{{info.reportUser}}
				</view>
			</view>
			<!-- 联系电话 -->
			<view class="formItem1" v-if="isLeaseShow">
				<text>{{ app.language.jd_anonymousPhone }}:</text>
				<view class="formB">
					{{info.reportPhone}}
				</view>
			</view>
			<!-- 选择派出所 -->
			<!-- <view class="formItem1">
				<text><text class="bt">*</text>{{ app.language.gxsldw }}:</text>
				<view class="formB">
					<picker mode="selector" name="pcs" :range="pcssList" @change="onpcsChange">
						<view class="picker">
							{{selectPcsValue}}
						</view>
					</picker>
				</view>
			</view> -->
			<view class="infoBox1">
				<!-- 居民身份证正面 -->
				<view class="formItem" v-if="isLeaseShow">
					<text><text class="bt">*</text>{{ app.language.jmcarz }}:</text>
					<view class="hjbImg">
						<button type="default" @click="chooseImg(1)">{{ app.language.scimg }}</button>
					</view>
					<view class="scimageBox" v-if="jmcarz.length>0">
						<view class="del3" @click="delImg(jmcarz,1)">
							<image class="delImg" src="/static/dels.png"></image>
						</view>
						<image class="scimage" :src="apiUrl+i" v-for="(i,key) in jmcarz" :key='index'
							@click="previewImg(item)"></image>
					</view>
					<!-- <image class="scimage" :src="item" v-for="(item,index) in jmcarz" :key='index' @click="previewImg(item)"></image> -->
				</view>
				<!-- 身份证反面 -->
				<view class="formItem" v-if="isLeaseShow">
					<text><text class="bt">*</text>{{ app.language.jmcarf }}:</text>
					<view class="hjbImg">
						<button type="default" @click="chooseImg(2)">{{ app.language.scimg }}</button>
					</view>
					<view class="scimageBox" v-if="jmcarf.length>0">
						<view class="del3" @click="delImg(jmcarz,2)">
							<image class="delImg" src="/static/dels.png"></image>
						</view>
						<image class="scimage" :src="apiUrl+i" v-for="(i,key) in jmcarf" :key='index'
							@click="previewImg(item)"></image>
					</view>
					<!-- <image class="scimage" :src="item" v-for="(item,index) in jmcarf" :key='index' @click="previewImg(item)"></image> -->
				</view>
				<!-- 证据上传 -->
				<view class="formItem">
					<text><text class="bt">*</text>{{ app.language.jd_evidence }}:</text>
					<view class="hjbImg">
						<button type="default" @click="chooseImg(3)">{{ app.language.scimg }}</button>
					</view>
					<view class="scimageBox" v-if="evidenceList.length>0">
						<view class="del3" @click="delImg(evidenceList,2)">
							<image class="delImg" src="/static/dels.png"></image>
						</view>
						<image class="scimage" :src="apiUrl+i" v-for="(i,key) in evidenceList" :key='index'
							@click="previewImg(item)"></image>
					</view>
					<!-- <image class="scimage" :src="item" v-for="(item,index) in evidenceList" :key='index' @click="previewImg(item)"></image> -->
				</view>
				<view class="formItem">
					<text><text class="bt">*</text>{{ app.language.jd_anonymousContent }}:</text>
					<textarea rows="4" cols="20" v-model="info.reportContent" class="text"></textarea>
				</view>
			</view>

			<!-- 可语音 -->
			<view class="chat">
				<view class="content">
					<view class="bottom" v-if="!yyList">
						<view class="onRecorder" @touchstart="onStart" @touchend="onEnd"
							:id="inrecord ? 'inRecorder' : ''">
							{{ app.language.HoldTalk }}
						</view>
						<image src="/static/mkf.png" @click="onRecorderchange"></image>
					</view>
					<scroll-view scroll-y="true" :scroll-into-view="poaMessgae" class="yuyin">
						<view class="block" v-for="(item,index) in list" :key="index">
							<view class="list" :id="item.status == 'l' ? 'l' : 'r'">
								<image src="/static/dels.png" class="avatar" @click="avatarDel"></image>
								<text v-if="item.type == 'text'">{{item.message}}</text>
								<image :src="item.message" v-if="item.type == 'image'" @click="onPreview(item.message)"
									mode="widthFix"></image>

								<view class="record" v-if="item.type == 'record'" @click="onPlay(item.src,index)">
									<view class="yuyins">
										<text>{{item.message}}</text> " <image src="/static/record.png"></image>
									</view>
								</view>

							</view>
						</view>
						<view id="poaMessgae"></view>
					</scroll-view>
				</view>
			</view>
			<button @click="submit" class="submit">{{app.language.tijiao}}</button>
		</view>
	</view>
</template>

<script>
	import graceChecker from "../../components/graceChecker.js"
	import {
		AddReporting
	} from '@/api/form.js'
	import {
		uploadFile,
		getPcsList
	} from '@/api/api.js'
	import config from '@/config.js'
	const global = getApp().globalData;
	export default {
		data() {
			return {
				apiUrl: config.baseUrl,
				rlsb: true,
				app: {
					global: global,
					name: global.appName,
					language: global.language
				},
				info: {
					reportUser: "",
					reportPhone: "",
					reportIdcardFront: "",
					reportIdcardBack: "",
					image: "",
					soundRecording: "",
					chooseImags: [],
					mp3List: [],
					reportContent: ""
				},
				// 身份证正面照
				jmcarz: [],
				// 身份证反面照
				jmcarf: [],
				// 证据照片
				evidenceList: [],
				tempFilePathList: [],
				imagesList: [],
				isLease: "", //是否租赁
				isLeaseShow: true,

				// 语音参数
				bgAudioManager: '', // 全局音频播放
				websocket: true,
				record: '', // 全局唯一录音管理区
				inrecord: false, // 是否处于录音状态
				chat: '', // 用户在聊天框中输入的内容
				scrollViewHeight: '',
				isRecorder: false, // 是否处于语音状态
				// 聊天列表数据
				// 头像其实可以写俩,你对面的,你自己的,我这里从简了 两端一样客服
				list: [],
				poaMessgae: 'poaMessgae',
				token: "",
				yuyinFilePaths: "",
				yyList: "",
				userInfo:{},
				// 派出所
				pcssList:[],
				pcsList:[],
				selectPcsValue:""
			}
		},
		onLoad(option) {
			this.selectPcsValue = this.app.language.qxz
			this.getHeight('.chat')
			// 全局唯一录音管理器
			this.record = uni.getRecorderManager()
			this.getToken()
			this.getPcs()
		},
		methods: {
			// 获取缓存
			getToken() {
				let that = this
				uni.getStorage({
					key: 'loginData',
					success: function(res) {
						that.token = res.data.userInfo.appToken
						that.userInfo = res.data.userInfo
						that.info.reportPhone = res.data.userInfo.phonenumber
						that.info.reportUser = res.data.userInfo.userName
					},

				});
			},
			
			// 获取派出所列表
			getPcs() {
				let data = {
					"": ""
				}
				getPcsList(data).then((res) => {
					this.pcsList = res.data
					console.log('res.data', res.data)
					if (res.code == 200) {
						for (let i = 0; i < res.data.length; i++) {
							this.pcssList.push(res.data[i].deptName);
						}
					}
				})
			},
			
			// 选择派出所
			onpcsChange(e) {
				this.selectPcsValue = this.pcssList[e.detail.value];
				this.info.policeStation = this.pcsList[e.detail.value].deptId;
			},

			// 是否匿名
			handleChange(e) {
				this.isLease = e.detail.value;
				this.info.reportType = e.detail.value
				console.log('this.info.reportType',this.info.reportType)
				if (this.isLease == 1) {
					this.isLeaseShow = true
				} else if (this.isLease == 0) {
					this.isLeaseShow = false
				}
			},

			// 上传图片
			chooseImg(item) {
				uni.chooseImage({
					//同时选中的图片的数量
					count: 5,
					//图片的格式  原图  压缩
					sizeType: ['original', 'compressed'],
					//图片的来源  相册  照相机
					sourceType: ['album', 'camera'],
					success: (result) => {
						this.srcImg = result.tempFilePaths
						let tempFilePaths = result.tempFilePaths;
						// this.tempFilePathList = result.tempFilePaths;
						let base64List = this.info.chooseImags;
						// 图片路径转换成base64格式
						tempFilePaths.forEach((item, index) => {
							uni.getFileSystemManager().readFile({
								filePath: item, // 图片文件路径
								encoding: 'base64', // 编码格式为base64
								success: res => { // 成功回调
									let base64 = 'data:image/jpeg;base64,' + res
										.data; // 拼接data URI
									base64List.push(base64);
									if (base64List.length === tempFilePaths.length) {
										this.info.chooseImags = base64List;
									}
								},
								fail: err => {
									console.error('读取文件失败', err);
								}
							});
						});

						// 上传图片并返回路径
						let imgList = [];
						// 上传前显示加载中
						uni.showLoading({
							title: this.app.language.jzz,
						});
						tempFilePaths.forEach((tempFilePaths) => {
							const uploadTask = uni.uploadFile({
								url: 'https://mqzhian.cn:8088/common/upload', // 你的ThinkPHP服务器地址
								filePath: tempFilePaths,
								name: 'file', // 这里根据服务器接收的字段来定义
								success: (uploadFileRes) => {
									const data = JSON.parse(uploadFileRes.data);
									console.log('上传成功', data);
									// 上传成功后隐藏加载中
									uni.hideLoading();
									// 这里处理返回的图片路径，例如保存到数组中
									imgList.push(data.fileName);
									console.log('imgListimgList', imgList)
									if (item == 1) {
										this.jmcarz = imgList
										this.info.reportIdcardFront = imgList.join(',')
									} else if (item == 2) {
										this.jmcarf = imgList
										this.info.reportIdcardBack = imgList.join(',')
									} else if (item == 3) {
										this.evidenceList = imgList
										this.info.image = imgList.join(',')
									}
								},
								fail: (error) => {
									console.error('上传失败', error);
									uni.showToast({
										title: this.app.language.scerror,
										icon: 'none',
									});
								}
							});
						});
					},
				});
			},

			// 删除图片
			delImg(index, id) {
				console.log('id', id)
				console.log('index', index)
				uni.showModal({
					title: this.app.language.titDel, // 弹框标题
					content: this.app.language.delBtn, // 弹框内容
					cancelText: this.app.language.popCancelText, // 取消按钮文本
					confirmText: this.app.language.okBtn, // 确认按钮文本
					success: (res) => {
						if (res.confirm) {
							// 用户点击了“确定”按钮
							if (id == 1) {
								this.jmcarz = imgList = []
								this.info.reportIdcardFront = ""

							} else if (id == 2) {
								this.jmcarf = []
								this.info.reportIdcardBack = ""
								console.log('this.otherList', this.otherList)
							} else if (id == 3) {
								this.evidenceList = []
								this.info.image = ""
							}
						} else if (res.cancel) {
							// 用户点击了“取消”按钮，或者关闭了弹框
							console.log('用户取消删除');
						}
					}
				});
			},

			// 提交
			submit() {
				let form = {}
				if (this.isLeaseShow) {
					// 举报人
					if (!this.info.reportUser) {
						uni.showToast({
							title: this.app.language.jd_ianonymousName,
							icon: 'none',
						});
						return
					}
					// 举报电话
					if (!this.info.reportPhone) {
						uni.showToast({
							title: this.app.language.jd_ianonymousPhone,
							icon: 'none',
						});
						return
					}
					// 身份证正面
					if (this.jmcarz.length == 0) {
						uni.showToast({
							title: this.app.language.ijmcarz,
							icon: 'none',
						});
						return
					}
					// 身份证反面照
					if (this.jmcarf.length == 0) {
						uni.showToast({
							title: this.app.language.ijmcarf,
							icon: 'none',
						});
						return
					}
				}
				// 派出所
				// if (!this.selectPcsValue||this.selectPcsValue === this.app.language.qxz ) {
				// 	uni.showToast({
				// 		title: this.app.language.hjpcsTx,
				// 		icon: 'none',
				// 	});
				// 	return
				// }
				// 证据上传
				if (this.evidenceList.length == 0) {
					uni.showToast({
						title: this.app.language.jd_ievidence,
						icon: 'none',
					});
					return
				}
				// 证据内容
				if (!this.info.reportContent) {
					uni.showToast({
						title: this.app.language.jd_ianonymousContent,
						icon: 'none',
					});
					return
				}
				form.appToken = this.token
				form.image = this.info.image
				form.reportType = this.info.reportType
				form.reportContent = this.info.reportContent
				form.reportUser = this.info.reportUser;
				form.reportPhone = this.info.reportPhone;
				form.reportIdcardFront = this.info.reportIdcardFront;
				form.reportIdcardBack = this.info.reportIdcardBack;
				form.policeStation = this.info.policeStation
				if (this.info.soundRecording) {
					form.soundRecording = this.info.soundRecording
				}
				console.log('form', form)
				uni.showLoading({
					title: this.app.language.jzz,
				});
				AddReporting(form).then((res) => {
					if (res.code == 200) {
						uni.hideLoading();
						uni.showToast({
							title: this.app.languageqddsh,
							icon: 'success',
						});
						setTimeout(() => {
							console.log('跳转首页')
							uni.reLaunch({
								url: '/pages/supervise/listText'
							});
						}, 1000);
					}
				})
			},

			// 预览图片
			previewImg(current) {
				uni.previewImage({
					current,
					urls: this.srcImg,
					// 图片指示器样式: 小圆点
					indicator: 'default',
					// 循环预览
					loop: true
				})
			},

			// ------------------------------------可语音---------------------------------------//
			formatDate(value) {
				if (typeof(value) == 'undefined') {
					return ''
				} else {
					let date = new Date(value)
					let now = new Date()
					let y = date.getFullYear()
					let MM = date.getMonth() + 1
					MM = MM < 10 ? ('0' + MM) : MM
					let d = date.getDate()
					d = d < 10 ? ('0' + d) : d
					let h = date.getHours()
					h = h < 10 ? ('0' + h) : h
					let m = date.getMinutes()
					m = m < 10 ? ('0' + m) : m
					let s = date.getSeconds()
					s = s < 10 ? ('0' + s) : s
					if (now.getDate() - d == 1 && now - date < 172800000) {
						return '昨天' + h + ':' + m
					} else if (now - date < 86400000) {
						return h + ':' + m
					} else if (now - date >= 86400000 && now - date < 31536000000) {
						return MM + '-' + d + ' ' + h + ':' + m
					} else if (now - date >= 31536000000) {
						return y + '-' + MM + '-' + d + ' ' + h + ':' + m
					}
				}
			},
			// input 输入框 回车发送消息事件
			onSend() {
				// 发送消息需要将 对象转换成字符串格式 接收消息在转换成对象

				let mess = {
					message: this.chat,
					status: 'r',
					type: 'text',
					avatar: '/static/avatar.png',
					time: new Date() - 0
				}

				this.sendmessage(JSON.stringify(mess))
				this.chat = ''
			},

			// 定位到消息最后一行
			poalast() {
				let that = this
				this.$nextTick(() => {
					this.poaMessgae = ''
					setTimeout(() => {
						this.poaMessgae = 'poaMessgae'
					}, 50)
				})
			},

			// 获取指定元素高度 为了设置scroll-view的高度 否则 srollviewinto 会失效
			getHeight(classNa) {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select(classNa).boundingClientRect(data => {
						// this.$emit('heightChange',data.height);
						this.scrollViewHeight = data.height

					}).exec();
					query.select('.bottom').boundingClientRect(res => {
						// this.$emit('heightChange',data.height);
						this.scrollViewHeight = this.scrollViewHeight - res.height
					}).exec();
				}, 10);
			},

			// 长按开始录入语音
			onStart() {
				this.inrecord = true
				this.record.start()
			},
			onEnd() {
				this.inrecord = false
				this.record.stop()
				// 监听录音暂停的回调参数
				this.record.onStop(res => {
					if (res.duration < 1000) {
						uni.showToast({
							title: this.app.language.jyd,
							icon: 'none',
						});
						return
					}
					this.tempFilePath = res.tempFilePath
					let yuyinFilePaths = res.tempFilePath;
					let base64List = this.info.mp3List;
					// 图片路径转换成base64格式
					uni.getFileSystemManager().readFile({
						filePath: yuyinFilePaths, // 图片文件路径
						encoding: 'base64', // 编码格式为base64
						success: res => { // 成功回调
							let base64 = 'data:image/jpeg;base64,' + res.data; // 拼接data URI
							base64List.push(base64);
						},
						fail: err => {
							console.error('读取文件失败', err);
						}
					});

					// 上传图片并返回路径
					uni.showLoading({
						title: this.app.language.jzz,
					});
					const uploadTask = uni.uploadFile({
						url: 'https://mqzhian.cn:8088/common/upload', // 你的ThinkPHP服务器地址
						filePath: yuyinFilePaths,
						name: 'file', // 这里根据服务器接收的字段来定义
						success: (uploadFileRes) => {
							const data = JSON.parse(uploadFileRes.data);
							// console.log('上传成功', data);
							// 上传成功后隐藏加载中
							uni.hideLoading();
							// 这里处理返回的图片路径，例如保存到数组中
							this.yyList = data.fileName
							this.info.soundRecording = this.yyList
							console.log('listlist',this.list)
							this.list[0].src = data.url
							console.log('listlist111111111',this.list)
						},
						fail: (error) => {
							console.error('上传失败', error);
							uni.showToast({
								title: '上传失败',
								icon: 'none',
							});
						}
					});
					// 将录音上传至服务器 拿到在线地址 连同地址一并发给客服 客服通过type来判断消息类型 实现播放
					/*
						后台上传步骤 后台莫得接口 省略先
					*/
					let mess = {
						message: Math.round(res.duration / 1000), // 时长
						status: 'r',
						// type 区分消息类型
						type: 'record',
						src: res.tempFilePath,
						avatar: '/static/avatar.png',
						time: new Date() - 0
					}
					// 写在上传回调内
					this.sendmessage(JSON.stringify(mess))


				})
				this.record.onError(err => {
					this.global.toast('获取录音失败')
				})
			},
			onPlay(e, index) {
				// // 我这里没有写暂停播放 需要的可以 设置变量 根据变量状态判断 pause 或 play
				// this.bgAudioManager = uni.createInnerAudioContext()
				// this.bgAudioManager.src = e
				// this.bgAudioManager.play()
				// this.bgAudioManager.onPlay(() => {
				// 	this.list[index].message--
				// })
				// this.bgAudioManager.onEnded(() => {
				// 	this.list[index].message = this.bgAudioManager.duration
				// 	this.bgAudioManager.offPlay()
				// 	this.bgAudioManager.offEnded()
				// 	this.bgAudioManager = null
				// })
				if(this.bgAudioManager) {
				        this.bgAudioManager.stop();
				        this.bgAudioManager.destroy();
				    }
				    
				    this.bgAudioManager = uni.createInnerAudioContext();
				    this.bgAudioManager.src = e;
				    
				    this.bgAudioManager.onPlay(() => {
				        this.list[index].message = this.app.language.bfz
				    });
				    
				    this.bgAudioManager.onError((err) => {
				        console.error('播放错误:', err);
				        uni.showToast({title: this.app.language.bfsb, icon: 'none'});
				    });
				    
				    this.bgAudioManager.onEnded(() => {
				        this.list[index].message = this.app.language.bfwc,
				        this.bgAudioManager.destroy();
				        this.bgAudioManager = null;
				    });
				    
				    this.bgAudioManager.play();
				

			},

			// 预览图片
			onPreview(e) {
				let urls = []
				urls.push(e)
				uni.previewImage({
					urls
				})
			},
			showPopup() {
				this.$refs.popup.open('bottom')
			},

			initWebSocket() {
				const url = 'wss:****'; // webSocket 域名
				this.websock = uni.connectSocket({
					url: url,
					success() {
						console.log('打开 websocket');
					}
				});
				this.websock.onOpen(this.onopen)
				this.websock.onMessage(this.onmessage)
				this.websock.onClose(this.close)
				this.websock.onError(this.onerror)
			},
			onopen() { // 连接建立之后执行send方法发送数据，连接成功
				const data = {
					token: this.userInfo.access_token
				};
				if (data.token) {
					const result = JSON.stringify(data);
					this.websock.send({
						data: result
					})
				} else {
					this.websock.close()
				}
			},
			onmessage(e) { // 数据接收
				e.status = 'l'
				let message = JSON.parse(e);
				this.list.push(message)
			},
			// 发送消息
			sendmessage(e) {
				this.list.push(JSON.parse(e))
				this.poalast() // 定位消息最后一行
			},
			close(e) {
				if (websocket) { // 非手动关闭自动从连
					this.reconnect()
				}
			},
			onerror() {
				if (websocket) { // 非手动关闭自动从连
					console.log('断开了重连');
					this.reconnect()
				}
			},
			reconnect() {
				this.initWebSocket();
			},

			avatarDel() {
				this.yyList = ""
				this.list = []
				this.info.soundRecording = ""
			},
			listText() {
				if (this.token) {
					if (this.userInfo.peopleType == "people") {
						if (!this.userInfo.userName && !this.userInfo.idcard &&
							!this.userInfo.idcardFront && !this.userInfo.idcardBack) {
							uni.showToast({
								title: this.app.language.improve,
								icon: 'none',
							});
							return
						} else {
							uni.reLaunch({
								url: '/pages/supervise/listText'
							});
						}
					} else if (this.userInfo.peopleType == "police") {
						if (!this.userInfo.agent && !this.userInfo.birthdate && !this.userInfo.birthdate && !this
							.userInfo
							.nationality && !this.userInfo.policeNumber &&
							!this.userInfo.personnelCategory && !this.userInfo.department && !this.userInfo.workTime &&
							!
							this.userInfo.positionRank &&
							!this.userInfo.marriage && !this.userInfo.height && !this.userInfo.weight && !this.userInfo
							.photo) {
							uni.showToast({
								title: this.app.language.improve,
								icon: 'none',
							});
							return
						} else {
							uni.reLaunch({
								url: '/pages/supervise/listText'
							});
						}
					}
				} else {
					uni.navigateTo({
						url: '../login/login',
					});
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.container {
		padding: 20rpx;
	}

	.form {
		box-shadow: 1px 1px 10rpx #ddd;
		/* display: block; */
		width: 100%;
		padding-bottom: 20rpx;
	}

	.formItem {
		margin: 10rpx 0;
		padding: 10rpx;
		/* height: 162rpx; */
		position: relative;
		border-bottom: 1px dashed #ddd
	}

	.infoBox {
		border: 1px solid #ddd;
		padding: 0 20rpx;
		box-shadow: 1px 1px 10rpx #ddd;
	}

	.infoBox1 {
		border: 1px solid #ddd;
		margin-top: 20rpx;
		padding: 0 15rpx;
		box-shadow: 1px 1px 10rpx #ddd;
	}

	.formItem1 {
		margin: 10rpx 0;
		padding: 17rpx 10rpx;
		/* height: 162rpx; */
		position: relative;
		border-bottom: 1px dashed #ddd
		
	}

	.formB {
		/* background-color: #f3f3f3; */
		font-size: 24rpx;
		padding: 10rpx;
		margin-top: 10rpx;
		position: absolute;
		right: 10rpx;
		top: -2rpx;
		color: #808080;
	}

	.formItem text,
	.formItem1 text {
		font-size: 26rpx;
	}

	.hjbImg button {
		font-size: 22rpx;
		width: 149rpx;
		height: 56rpx;
		background: #2f8ef9;
		color: #fff;
	}

	.hjbImg {
		/* position: absolute;
		bottom: 10rpx; */
		width: 150rpx;
		margin-top: 20rpx;
	}

	.scimage {
		width: 121rpx;
		height: 80rpx;
		margin-right: 10rpx;
		margin-top: 5px;
		border-radius: 5rpx
	}

	.title {
		margin-top: 30rpx;
		font-weight: bold;
		font-size: 28rpx;
	}

	.submit {
		background-color: #2f8ef9;
		color: #fff;
		font-size: 28rpx;
		width: 95%;
		margin: 20rpx auto 0;
	}

	.picker {
		padding: 10px;
		text-align: center;
		margin-top: -25rpx;
	}

	.bt {
		color: red;
		margin-right: 5rpx;
	}

	.text {
		font-size: 24rpx;
		color: #808080;
		margin-top: 10rpx;
		border: 1px solid #ddd;
		padding: 10rpx;
		border-radius: 10rpx;
		width: 96%;
		height: 200rpx;
	}


	/* ----------------------------语音--------------------------- */
	.chat {
		// padding: 30rpx;
		box-sizing: border-box;
		// border: 1px solid red;
		margin-top: 20rpx;
	}

	.chat .image {
		background: #f6f6f6;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		align-items: center;
		padding: 40rpx 80rpx;
		height: 180rpx;
		box-sizing: border-box;

		.list {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-right: 10rpx;

			text {
				font-size: 26rpx;
				color: #333333;
				line-height: 30rpx;
				margin-top: 10rpx;
			}
		}
	}

	.chat .bottom {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// width: 750rpx;
		// height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding: 0 31rpx 40rpx;
		box-sizing: border-box;
		background: #FFF;
		z-index: 99;

		image {
			width: 36rpx;
			height: 36rpx;
		}

		input {
			width: 581rpx;
			height: 69rpx;
			background: #F7F7F9;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding: 0pt 30rpx;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		.onRecorder {
			width: 581rpx;
			height: 69rpx;
			line-height: 69rpx;
			text-align: center;
			background: #F7F7F9;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding: 0pt 30rpx;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		#inRecorder {
			background: #cdcdcd;
		}
	}

	.content {
		padding-bottom: 150rpx;
		height: 110rpx;

		.time {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-bottom: 20rpx;

			text {
				background: rgba(0, 0, 0, 0.6);
				color: #f6f6f6;
				padding: 6rpx 10rpx;
				border-radius: 10rpx;
				font-size: 20rpx;
			}
		}

		.list {
			display: flex;
			align-items: flex-start;
			margin-bottom: 39rpx;

			.avatar {
				border-radius: 50%;
				width: 50rpx;
				height: 50rpx;
				position: relative;
				top: 12rpx;
			}

			image {
				width: 120rpx;
				// height: 120rpx;
			}

			text {
				font-size: 22rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				max-width: 520rpx;
			}

			.record {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					position: relative;
					top: 12rpx;
				}
			}
		}

		#l {
			flex-direction: row;

			text {
				min-height: 84rpx;
				background: #F4F8FB;
				border-radius: 0rpx 20rpx 20rpx 20rpx;
				padding: 0 20rpx;
				line-height: 84rpx;
				color: #333;
			}

			.avatar {
				margin-right: 18rpx;
			}

			.record {
				min-height: 84rpx;
				background: #F4F8FB;
				border-radius: 0rpx 20rpx 20rpx 20rpx;
				padding: 0 20rpx;
				line-height: 84rpx;
				color: #333;
			}
		}

		#r {
			flex-direction: row-reverse;

			text {
				min-height: 84rpx;
				background: #6B72F6;
				border-radius: 20rpx 0rpx 20rpx 20rpx;
				padding: 0 20rpx;
				line-height: 84rpx;
				color: #FFF;
				width: 100%;
			}

			.avatar {
				margin-left: 18rpx;
			}

			.record {
				min-height: 84rpx;
				background: #6B72F6;
				border-radius: 63rpx;
				padding: 0 20rpx;
				// line-height: 84rpx;
				color: #FFF;
				width: 100%;
			}
		}
	}

	.yuyin {
		height: 300rpx;
		overflow-y: auto;
		/* 当内容超出高度时显示滚动条 */
	}

	.radioYes {
		margin-right: 20rpx;
	}

	.formB radio-group {
		margin-top: -15rpx;
	}

	.scimageBox {
		display: inline-block;
		width: 100%;
		height: 100rpx;
		position: relative;
		/* text-align: center; */
	}

	.scimage {
		width: 121rpx;
		height: 80rpx;
		margin-right: 10rpx;
		margin-top: 5px;
		border-radius: 5rpx;
	}

	.del3 {
		color: red;
		font-size: 26rpx;
		text-align: right;
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 0;
		top: -43rpx;
	}

	.delImg {
		width: 50rpx;
		height: 50rpx;
	}

	.yuyins {
		margin: 0 auto;
	}
	
	.listText {
		font-size: 28rpx;
		color: #2f8ef9;
		margin: 15rpx 0;
		text-align: right;
		font-weight: 500;
		/* border-bottom: 1px solid #ddd; */
		padding-bottom: 10rpx;
	}
	
	.listText text{
		border: 1px solid #2f8ef9;
		padding: 10rpx 15rpx;
		border-radius: 6rpx;
	}
</style>